<template>
  <div class="detail-container" >
    <!-- 商品信息 -->
    <div class="detail-top">
      <img :src="fan.picture" class="main-img" v-if="fan.picture" />
      <div class="main-info">
        <div class="title">
          <b>{{ fan.storeName }}</b>
        </div>
        <div class="row">
          <span>生产批次：{{ fan.batch }}</span>
          <span style="margin-left: 90px;">保质期：{{ fan.expiration }} 天</span>
        </div>
        <div class="row">
          <span>生产许可证号：{{ fan.license }}</span>
          <span>生产企业：{{ fan.company }}</span>
        </div>

        <!-- 产品检验报告 -->
        <div class="report-section">
          <div class="section-titles">产品检验报告</div>
          <div class="report-list">
            <div
              v-for="(img, idx) in reportList"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="reportList.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleReportUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button @click="goToEdit">修改基本信息</el-button>
        <el-button>导出溯源码</el-button>
      </div>
    </div>
  
     <div style="margin-top: 20px;">
<el-button @click="showDetailBottoms" size="large">
  养殖信息
</el-button>
<el-button @click="showSlaughters" size="large">
  屠宰信息
</el-button>
<el-button @click="showDeepProcessings"  size="large">
  深加工信息
</el-button>
  </div>
<!-- 养殖信息 -->
  <div class="detail-bottom" v-if="showDetailBottom">
       <!-- 养殖信息 -->
        <el-card style="margin-top: 10px;">
            <div class="section">
      <div class="header-wrapper">
  <h3 class="card-title" style="color: #409EFF;">养殖信息</h3>
  <el-button class="setting-btn"  text bg  @click="openCultivationDialog(route.query.batch)">设置</el-button>
</div>

    <div class="card-content">
      <div class="info-columns">
        <!-- 左侧信息 -->
        <div class="column">
          <div class="info-item" >
            <span class="label">品种：</span>
            <span class="value">{{ detail?.variety }}</span>
          </div>
          <div class="info-item">
            <span class="label">饲养天数：</span>
            <span class="value">{{ detail?.rearingDays }} 天</span>
          </div>
          <div class="info-item">
            <span class="label">饲养负责人：</span>
            <span class="value">{{ detail?.rearingLeader }}</span>
          </div>
        </div>
        
        <!-- 右侧信息 -->
        <div class="column" style="margin-left: 25px;">
          <div class="info-item">
            <span class="label">来源：</span>
            <span class="value">{{ detail?.source }}</span>
          </div>
          <div class="info-item">
            <span class="label">饲料品牌：</span>
            <span class="value">{{ detail?.brand }}</span>
          </div>
          <div class="info-item">
            <span class="label">出栏日期：</span>
            <span class="value">{{  detail?.outDate ? moment(detail?.outDate).format('YYYY年MM月DD日'):' ' }}</span>
          </div>
        </div>
      </div>
    </div>
    </div>
        </el-card>

        <!-- 免疫信息区块 -->
         <el-card style="margin-top: 10px;">
                    <div class="section">
      <div class="header-wrapper">
  <h3 class="card-title" style="color: #409EFF;">免疫信息</h3>
  <el-button style="margin-left: 25px;" class="setting-btn"  text bg  @click="addImmunizationRow">新增行</el-button>
</div>
  <el-table :data="immunizationList" style="width: 70%;">
  <el-table-column prop="rearingDays" label="饲养天数">
    <template #default="{ row }">
      <el-input v-if="row.isNew || editingId === (row.id || row.__key)" v-model="row.rearingDays" size="small" />
      <span v-else>{{ row.rearingDays }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="function" label="免疫方法">
    <template #default="{ row }">
      <el-input v-if="row.isNew || editingId === (row.id || row.__key)" v-model="row.function" size="small" />
      <span v-else>{{ row.function }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="way" label="免疫方式">
    <template #default="{ row }">
      <el-input v-if="row.isNew || editingId === (row.id || row.__key)" v-model="row.way" size="small" />
      <span v-else>{{ row.way }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template #default="{ row, $index }">
      <template v-if="row.isNew">
        <el-button type="primary" size="small" @click="handleSave(row)">保存</el-button>
        <el-button size="small" @click="immunizationList.splice($index, 1)">取消</el-button>
      </template>
      <template v-else-if="editingId === (row.id || row.__key)">
        <el-button type="primary" size="small" @click="handleSave(row)">保存</el-button>
        <el-button size="small" @click="cancelEditImmunization(row)">取消</el-button>
      </template>
      <template v-else>
        <el-button label="text" size="small" @click="editImmunizationRow(row)">修改</el-button>
        <el-button label="text" size="small" style="color: #F56C6C;" @click="deleteImmunizationRow(row)">删除</el-button>
      </template>
    </template>
  </el-table-column>
</el-table>
</div>
         </el-card>

      
     <!-- 动检证 -->
      <el-card style="margin-top: 10px;">
           <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">动检证</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in DongList"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteDongImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="DongList.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleDongUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
</div>
      </el-card>
     


  <!-- 养殖企业信息 -->
   <el-card style="margin-top: 10px;">
      <div class="section" style="margin-top: 15px;">
      <div class="header-wrapper">
  <h3 class="card-title" style="color: #409EFF;">企业信息</h3>
  <el-button class="setting-btn"  text bg  @click="openCultivationCompanyDialog(route.query.batch)">设置</el-button>
</div>
  <div class="card-content">
  <div class="info-columns">
    <div class="info-items">
      <span class="label">养殖场：</span>
      <span class="value">{{ CulCom?.farm }}</span>
    </div>
    <div class="info-items right" style="margin-left: 39%;">
      <span class="label">负责人：</span>
      <span class="value">{{ CulCom?.leader }}</span>
    </div>
  </div>
  <div class="info-columns">
    <div class="info-items">
      <span class="label">存栏数量：</span>
      <span class="value">{{ CulCom?.saves }}只</span>
    </div>
  </div>
</div>



  </div>
   </el-card>
   
  <!-- 养殖企业图片 -->
  <el-card style="margin-top: 10px;">
       <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">企业照片</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in CompanyList"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteCompanyImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="CompanyList.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleCompanyUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
</div>
  </el-card>
  </div>
<!-- 屠宰信息 -->
 
<div class="detail-bottom" v-if="showSlaughter">
     <!-- 屠宰信息 -->
      <el-card style="margin-top: 10px;">
        <div class="section">
      <div class="header-wrapper">
          <h3 class="card-title" style="color: #409EFF;">屠宰信息</h3>
          <el-button class="setting-btn"  text bg  @click="openSlaughterDialog(route.query.batch)">设置</el-button>
      </div>

    <div class="card-content">
      <div class="info-columns">
        <!-- 左侧信息 -->
        <div class="column">
          <div class="info-item" >
            <span class="label">批次：</span>
            <span class="value">{{ Slau?.batch }}</span>
          </div>
          <div class="info-item">
            <span class="label">到场时间：</span>
            <span class="value">{{ formatTime(Slau?.startTime) }} </span>
          </div>
         
        </div>
        
        <!-- 右侧信息 -->
        <div class="column" style="margin-left: 25px;">
          <div class="info-item">
            <span class="label">到场均重：</span>
            <span class="value">{{ Slau?.weight }}</span>
          </div>
          <div class="info-item">
            <span class="label">屠宰时间：</span>
            <span class="value">{{ formatTime(Slau?.startTime) }}</span>
          </div>
          
        </div>
      </div>
    </div>
    </div>
      </el-card>
    
 <!-- 相关资质 -->
  <el-card style="margin-top: 10px;">
       <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">相关资质</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Qualification"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteQualificationImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Qualification.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleQualificationUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
  </el-card>
     

       <!-- 屠宰企业信息 -->
        <el-card style="margin-top: 10px;">
               <div class="section">
      <div class="header-wrapper">
  <h3 class="card-title" style="color: #409EFF;">企业信息</h3>
  <el-button class="setting-btn"  text bg  @click="openSlaughterCompanyDialog(route.query.batch)">设置</el-button>
  
</div>

    <div class="card-content">
      <div class="info-columns">
        <!-- 左侧信息 -->
        <div class="column">
          <div class="info-item" >
            <span class="label">公司名称：</span>
            <span class="value">{{ SlauCom?.companyName }}</span>
          </div>
          <div class="info-item">
            <span class="label">公司地址：</span>
            <span class="value">{{ SlauCom?.address }}</span>
          </div>
          <div class="info-item">
            <span class="label">公司简介：</span>
            <span class="value">{{ SlauCom?.companyDesc }}</span>
          </div>
        </div>
        
        <!-- 右侧信息 -->
        <div class="column" style="margin-left: 25px;">
          <div class="info-item">
            <span class="label">成立时间：</span>
            <span class="value">{{ SlauCom?.establish ? moment(SlauCom?.establish).format('YYYY年MM月DD日'):' ' }}</span>
          </div>
        </div>
      </div>
    </div>

    </div>
        </el-card>
   

     <!-- 企业照片 -->
      <el-card style="margin-top: 10px;">
          <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">企业照片</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Business"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteBusinessImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Business.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleBusinessUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
      </el-card>
      

</div>
<!-- 深加工信息 -->
<div class="detail-bottom" v-if="showDeepProcessing">
       <!-- 深加工信息 -->
        <el-card style="margin-top: 10px;">
           <div class="section">
      <div class="header-wrapper">
          <h3 class="card-title" style="color: #409EFF;">深加工信息</h3>
          <el-button class="setting-btn"  text bg  @click="opendeepDialog(route.query.batch)">设置</el-button>
      </div>

    <div class="card-content">
      <div class="info-columns">
        <!-- 左侧信息 -->
        <div class="column">
          <div class="info-item" >
            <span class="label">班组：</span>
            <span class="value">{{ Deeps?.team }}</span>
          </div>
        </div>
        <!-- 右侧信息 -->
        <div class="column" style="margin-left: 25px;">
          <div class="info-item">
            <span class="label">负责人：</span>
            <span class="value">{{ Deeps?.leader }}</span>
          </div>
          
        </div>
      </div>
    </div>

    </div>
        </el-card>
   
 <!-- 食品安全信息 -->
  <el-card style="margin-top: 10px;">
       <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">食品安全信息</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Eat"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteEatImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Eat.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleEatUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
  </el-card>
     

      <!-- 供应商信息 -->
        <el-card style="margin-top: 10px;">
             <div class="section" style="margin-top: 15px;">
    <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">供应商信息</h3>
        <!-- 原料 -->
         <div class="section" style="margin-top: 15px;">

      <div class="header-wrapper">
         <el-icon style="color: #409EFF; margin-right: 6px;"><StarFilled /></el-icon>
        <span class="card-titless">原料</span>
        <el-button class="setting-btn"  text bg @click="openDialogVendor('原料')">设置</el-button>
      </div>

       <div class="column">
          <div class="info-item" >
            <span class="label">生产批次：</span>
            <span class="value">{{ rawMaterialVendorBatch }}</span>
          </div>
        </div>
       <!-- 相关材料 -->
      <div class="section" style="margin-top: 15px;">
  <h5 class="card-titles" style=" margin-bottom: 8px;">相关材料</h5>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Materiala"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteMaterialaImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Materiala.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleMaterialaUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>

  </div>

 
    <!-- 辅料 -->
       <div class="section" style="margin-top: 15px;">
         <div class="header-wrapper">
          <el-icon style="color: #409EFF; margin-right: 6px;"><StarFilled /></el-icon>
        <span class="card-titless">辅料</span>
        <el-button class="setting-btn"  text bg  @click="openDialogVendor('辅料')">设置</el-button>
      </div>
        <div class="column">
          <div class="info-item" >
            <span class="label">生产批次：</span>
            <span class="value">{{ auxMaterialVendorBatch }}</span>
          </div>
        </div>
     


      <div class="section" style="margin-top: 15px;">
  <h5 class="card-titles" style=" margin-bottom: 8px;">相关材料</h5>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Materialb"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteMaterialbImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Materialb.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleMaterialbUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
</div>


 <!-- 添加剂 -->
       <div class="section" style="margin-top: 15px;">
          
        <div  class="header-wrapper">
             <el-icon style="color: #409EFF; margin-right: 6px;"><StarFilled /></el-icon>
        <span class="card-titless">添加剂</span>
        <el-button class="setting-btn"  text bg  @click="openDialogVendor('添加剂')">设置</el-button>
      </div>
       <div class="column">
          <div class="info-item" >
            <span class="label">生产批次：</span>
            <span class="value">{{ additiveVendorBatch }}</span>
          </div>
        </div>
  <h5 class="card-titles" style=" margin-bottom: 8px;">相关材料</h5>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Materialc"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteMaterialcImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Materialc.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleMaterialcUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>


       <!-- 包材 -->
         <div class="section" style="margin-top: 15px;">
            <div class="header-wrapper">
                <el-icon style="color: #409EFF; margin-right: 6px;"><StarFilled  /></el-icon>
        <span class="card-titless">包材</span>
        <el-button class="setting-btn"  text bg  @click="openDialogVendor('包材')">设置</el-button>
      </div>
        
      
      <div class="column">
          <div class="info-item" >
            <span class="label">生产批次：</span>
            <span class="value">{{ packageVendorBatch }}</span>
          </div>
        </div>
      <div class="section" style="margin-top: 15px;">
  <h5 class="card-titles" style=" margin-bottom: 8px;">相关材料</h5>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Materiald"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteMaterialdImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Materiald.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleMaterialdUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
 </div>
</div>
        </el-card>

           <!-- 深加工企业信息 -->
             <el-card style="margin-top: 10px;">
                 <div class="section" style="margin-top: 15px;">
      <div class="header-wrapper">
  <h3 class="card-title" style="color: #409EFF;">企业信息</h3>
  <el-button class="setting-btn"  text bg  @click="openDeepComDialog(route.query.batch)">
      设置
  </el-button>
  
</div>

   
        <div class="card-content">
      <div class="info-columns">
        <!-- 左侧信息 -->
        <div class="column">
          <div class="info-item" >
            <span class="label">公司名称：</span>
            <span class="value">{{ DeepCom?.companyName }}</span>
          </div>
        </div>
        <!-- 右侧信息 -->
        <div class="column"  style="margin-left: 25px;">
          <div class="info-item">
            <span class="label">生产许可证号：</span>
            <span class="value">{{ DeepCom?.licenseNum }}</span>
          </div>
          
        </div>
      </div>
    </div>
   
</div>
             </el-card>
   
     <!-- 企业照片 -->
       <el-card style="margin-top: 10px;">
          <div class="section" style="margin-top: 15px;">
  <h3 class="card-title" style="color: #409EFF; margin-bottom: 8px;">企业照片</h3>
  <div class="report-section">
    <div class="report-section">
          
          <div class="report-list">
            <div
              v-for="(img, idx) in Deep"
              :key="img.id"
              class="report-img-wrapper"
            >
              <img v-if="img.imgUrl" :src="img.imgUrl" class="report-img" />
              <el-icon class="img-delete-x" @click="deleteDeepImage(img.id)">
                <Close />
              </el-icon>
            </div>
            <!-- 上传按钮，最多9张 -->
            <label v-if="Deep.length < 9" class="report-upload">
              <input
                type="file"
                accept="image/*"
                style="display: none"
                @change="handleDeepUpload"
              />
              <el-icon class="plus-icon"><Plus /></el-icon>
            </label>
          </div>
        </div>
  </div>
      </div>
       </el-card>
      
 

  </div>
</div>

  <el-dialog v-model="dialogVisible" title="养殖信息" width="500px">
  <el-form :model="cultivationForm" label-width="100px" :rules="breedRules" ref="breedFormRef"    >
    <el-form-item label="品种" prop="variety">
      <el-input
        v-model="cultivationForm.variety"
        maxlength="30"
        show-word-limit
        placeholder="请输入品种"
        clearable
      />
    </el-form-item>
    <el-form-item label="来源" prop="source">
      <el-input
        v-model="cultivationForm.source"
        maxlength="30"
        show-word-limit
        placeholder="请输入来源"
        clearable
      />
    </el-form-item>
    <el-form-item label="饲养天数" prop="rearingDays">
      <el-input
        v-model="cultivationForm.rearingDays"
        maxlength="5"
        show-word-limit
        placeholder="请输入饲养天数"
        clearable
       
      />
    </el-form-item>
    <el-form-item label="饲养品牌" prop="brand">
      <el-input
        v-model="cultivationForm.brand"
        maxlength="30"
        show-word-limit
        placeholder="请输入饲养品牌"
        clearable
      />
    </el-form-item>
    <el-form-item label="饲养负责人" prop="rearingLeader">
      <el-input
        v-model="cultivationForm.rearingLeader"
        maxlength="30"
        show-word-limit
        placeholder="请输入饲养负责人"
        clearable
      />
    </el-form-item>
    <el-form-item label="出栏日期" prop="outDate">
      <el-date-picker
        v-model="cultivationForm.outDate"
        type="date"
        placeholder="请选择出栏日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        style="width: 100%;"
      />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="handleDialogClose">取消</el-button>
    <el-button type="primary" @click="submitCultivation">保存</el-button>
  </template>
</el-dialog>


  <el-dialog v-model="dialogVisibleCompany" title="企业信息" width="500px">
  <el-form :model="cultivationCompany" label-width="100px" :rules="rules" ref="formRef"   >
     <el-form-item label="养殖场" prop="farm">
    <el-input
      v-model="cultivationCompany.farm"
      maxlength="30"
      show-word-limit
      placeholder="请输入养殖场名称"
      clearable
    />
  </el-form-item>
    <el-form-item label="负责人" prop="leader">
    <el-input
      v-model="cultivationCompany.leader"
      maxlength="30"
      show-word-limit
      placeholder="请输入负责人姓名"
      clearable
    />
  </el-form-item>
    <el-form-item label="存栏数量" prop="saves">
    <el-input
      v-model="cultivationCompany.saves"
      maxlength="5"
      show-word-limit
      placeholder="请输入存栏数量"
      clearable
      type="number"
      oninput="this.value=this.value.replace(/[^0-9]/g,'')"
    />
  </el-form-item>

  </el-form>
  <template #footer>
    <el-button @click="dialogVisibleCompany = false">取消</el-button>
    <el-button type="primary" @click="submitCultivationCompany">保存</el-button>
  </template>
</el-dialog>

  <el-dialog v-model="dialogSlaughter" title="屠宰信息" width="600px">
  <el-form :model="SlaughterForm" label-width="140px" label-position="left"  :rules="slaughterRules" ref="slaughterFormRef"  >
     <el-form-item label="批次" >
      <el-input
        v-model="SlaughterForm.batch"
        maxlength="30"
        show-word-limit
        placeholder="请输入批次"
        clearable
      />
    </el-form-item>
    <el-form-item label="到场均重（公斤）" prop="weight" >
      <el-input
      :type="'text'"
        v-model="SlaughterForm.weight"
        maxlength="30"
        show-word-limit
        placeholder="请输入到场均重（公斤）"
        clearable
      />
    </el-form-item>

    <el-form-item label="到场时间" prop="startTime">
     
      <el-date-picker
        v-model="SlaughterForm.startTime"
        type="datetime"
        placeholder="请选择到场时间"
        style="width: 100%;"
      />
    </el-form-item>
    <el-form-item label="屠宰时间" prop="endTime">
      <el-date-picker
        v-model="SlaughterForm.endTime"
        type="datetime"
        placeholder="请选择屠宰时间"
        style="width: 100%;"
      />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="DialogCloseSlaughter">取消</el-button>
    <el-button type="primary" @click="submitSlaughter">保存</el-button>
  </template>
</el-dialog>

<el-dialog v-model="dialogSlaughterCompany" title="企业信息" width="600px">
    <el-form :model="SlaughterCompanyForm" :rules="slaughterCompanyRules" ref="slaughterCompanyFormRef" label-width="100px" label-position="left">
      <el-form-item label="公司名称：" prop="companyName">
        <el-input v-model="SlaughterCompanyForm.companyName" placeholder="请输入公司名称" />
      </el-form-item>
       <el-form-item label="公司地址：" prop="address">
      <el-select v-model="province" placeholder="请选择省" style="width: 120px; margin-right: 8px;" @change="onProvinceChange">
        <el-option v-for="item in provinceList" :key="item.label" :label="item.label" :value="item.label" />
      </el-select>
      <el-select v-model="city" placeholder="请选择市" style="width: 120px; margin-right: 8px;" @change="onCityChange">
        <el-option v-for="item in cityList" :key="item.label" :label="item.label" :value="item.label" />
      </el-select>
      <el-select v-model="area" placeholder="请选择区/县" style="width: 120px;" @change="onAreaChange">
        <el-option v-for="item in areaList" :key="item.label" :label="item.label" :value="item.label" />
      </el-select>
    </el-form-item>
      <el-form-item label="成立时间：" prop="establish">
        <el-date-picker
          v-model="SlaughterCompanyForm.establish"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择成立时间"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="公司简介：" prop="companyDesc">
        <el-input
          v-model="SlaughterCompanyForm.companyDesc"
          type="textarea"
          :rows="4"
          placeholder="请输入公司简介"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="DialogCloseSlaughterCompany">取消</el-button>
      <el-button type="primary" @click="submitSlaughterCompany">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogdeep" title="深加工信息" width="600px">
    <el-form :model="deepForm" :rules="DeepsRules" ref="DeepFormRef" label-width="100px" label-position="left">
      <el-form-item label="班组：" prop="team">
        <el-input v-model="deepForm.team" placeholder="请输入班组" />
      </el-form-item>
 <el-form-item label="负责人：" prop="leader">
        <el-input v-model="deepForm.leader" placeholder="请输入负责人" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="DialogClosedeep">取消</el-button>
      <el-button type="primary" @click="submitDeep">保存</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisibleDeepCom" title="企业信息" width="600px">
    <el-form :model="DeepFormCom" :rules="rulesDeepCom" ref="DeepComFormRef" label-width="130px" label-position="left">
      <el-form-item label="公司名称：" prop="companyName">
        <el-input v-model="DeepFormCom.companyName" placeholder="请输入公司名称" />
      </el-form-item>
   
 <el-form-item label="生产许可证号：" prop="licenseNum">
        <el-input v-model="DeepFormCom.licenseNum" placeholder="请输入生产许可证号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleDialogCloseDeepCom">取消</el-button>
      <el-button type="primary" @click="submitDeepCom">保存</el-button>
    </template>
  </el-dialog>

      <!-- 供应商信息 -->
    <el-dialog v-model="dialogVisibleVendor" title="设置生产批次">
      <el-form :model="dialogFormVendor">
        <el-form-item label="生产批次">
          <el-input v-model="dialogFormVendor.vendorBatch" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleVendor = false">取消</el-button>
        <el-button type="primary" @click="saveVendorBatch">保存</el-button>
      </template>
    </el-dialog>

</template>

<script setup lang="ts">

import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
import { reactive, ref, onMounted,watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import http from '@/http/axioshttp'
import { Plus, Close } from '@element-plus/icons-vue'
import moment from 'moment'
const router = useRouter()
const reportList = ref<any[]>([])
const DongList = ref<any[]>([])
const Qualification = ref<any[]>([])
const Business = ref<any[]>([])
const Eat = ref<any[]>([])
const Deep = ref<any[]>([])
const CompanyList = ref<any[]>([])
const Materiala = ref<any[]>([])
const Materialb = ref<any[]>([])
const Materialc = ref<any[]>([])
const Materiald = ref<any[]>([])
const route = useRoute()
const dialogSlaughter = ref(false);
const dialogVisibleDeepCom=ref(false)
//点击按钮 出现信息
onMounted(() => {
  showDetailBottom.value = true;
  showSlaughter.value = false;
  showDeepProcessing.value = false;
});
const showDetailBottom = ref(false);
const showSlaughter=ref(false)
const showDeepProcessing=ref(false)

const showDetailBottoms = () => {
  showDetailBottom.value = true;
  showSlaughter.value = false;
  showDeepProcessing.value = false;
};
const showSlaughters = () => {
  showDetailBottom.value = false;
  showSlaughter.value = true;
  showDeepProcessing.value = false;
};
const showDeepProcessings = () => {
  showDetailBottom.value = false;
  showSlaughter.value = false;
  showDeepProcessing.value = true;
};



//根据批次 跳转到详情页
function goToEdit() {
  router.push({ path: '/getbasic', query: { batch: route.query.batch } })
}

//反填基础表信息
const fan=ref({
  picture:'',
  storeName:'',
  batch:'',
  expiration:'',
  license:'',
  company:''
})
onMounted( () => {
 fetchFanBasic()
   fetchReportImages()
    fetchDongImages()
   fetchCompanyImages()
  fetchQualificationImages()
})
const fetchFanBasic = async () => {
  const batch = route.query.batch
  const res = await http.get('/api/Details/GetFanBasic', { params: { batch } })
  Object.assign(fan.value, res.data.datas || {})
}
//显示产品检验报告的图片 固定类型为1
async function fetchReportImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 1 }
  });
  // 只要 imgUrl 存在就保留
  reportList.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传产品检验报告的图片
async function handleReportUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '1'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      reportList.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchReportImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除产品检验报告的图片
async function deleteImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=1`);
  // 删除成功后刷新图片列表
  fetchReportImages();
}

//设置养殖信息（显示）
const detail = ref({
  "variety": "",
  "source": "",
  "rearingDays": "",
  "brand": "",
  "rearingLeader": "",
  "outDate": "",
  "batch": route.query.batch,
  
})
onMounted(()=>{
  getcultivation();
})
const getcultivation=()=>{
  console.log(route.query.batch);
  
  http.get("/api/Cultivations/GetCultivation",{params:{Batch:route.query.batch}}).then(res=>{
    detail.value=res.data.datas
   
  })
}

//点击设置养殖信息 获取批次
const handleDialogClose = () => {
  dialogVisible.value = false
}

const openCultivationDialog = async (batch:any) => {
route.query.batch=batch
  dialogVisible.value = true;
};
const dialogVisible = ref(false);
const cultivationForm = ref({
  variety: '',
  source: '',
  rearingDays: '',
  brand: '',
  rearingLeader: '',
  outDate: '',
  batch: route.query.batch,         
});
//新增养殖信息
const breedFormRef = ref<FormInstance | null>(null)
const submitCultivation = async () => {
  try {
    await breedFormRef.value?.validate()
    // 校验通过，提交数据
    dialogVisible.value = false
  } catch (fields: any) {
     
    // 校验未通过，弹窗提示
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'variety': label = '品种'; break
      case 'source': label = '来源'; break
      case 'rearingDays': label = '饲养天数'; break
      case 'brand': label = '饲养品牌'; break
      case 'rearingLeader': label = '饲养负责人'; break
      case 'outDate': label = '出栏日期'; break
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
   await  http.post('/api/Cultivations/AddCultivation', cultivationForm.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogVisible.value = false;
      getcultivation();
      
     }
     else{
       ElMessage.error(res.data.msg);
        getcultivation();
     }
     });
};
//新增养殖信息验证规则
const breedRules = {
  variety: [
    { required: true, message: '品种不能为空', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, message: '仅限中文或字母，最多30位', trigger: 'blur' }
  ],
  source: [
    { required: true, message: '来源不能为空', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, message: '仅限中文或字母，最多30位', trigger: 'blur' }
  ],
  rearingDays: [
    { required: true, message: '饲养天数不能为空', trigger: 'blur' },
    { pattern: /^\d{1,5}$/, message: '仅限数字，最多5位', trigger: 'blur' }
  ],
  brand: [
    { required: true, message: '饲养品牌不能为空', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, message: '仅限中文或字母，最多30位', trigger: 'blur' }
  ],
  rearingLeader: [
    { required: true, message: '饲养负责人不能为空', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, message: '仅限中文或字母，最多30位', trigger: 'blur' }
  ],
  outDate: [
    { required: true, message: '出栏日期不能为空', trigger: 'change' }
  ]
}
//获取免疫信息
onMounted(()=>{
  getImmunity();
})

const getImmunity=()=>{
  http.get("/api/Cultivations/GetImmunity",{params:{Batch:route.query.batch}}).then(res=>{
    immunizationList.value=res.data.data
  })
}

const editingId = ref<number | null>(null)
const editRow = ref<Partial<ImmunizationInfo>>({})
const editingIds = ref<number[]>([])
interface ImmunizationInfo {
  rearingDays: string | number;
  way: string;
  function: string;
  batch: string;
  isNew?: boolean;
}


type ImmunizationRow = ImmunizationInfo & { __key?: number }
const immunizationList = ref<ImmunizationRow[]>([])
//添加免疫信息新增行
const addImmunizationRow = () => {
  const key = Date.now() + Math.random();
  immunizationList.value.push({
    __key: key,
    rearingDays: '',
    way: '',
    function: '',
    batch: route.query.batch as string || '',
    isNew: true,
  });
  editingIds.value.push(key); 
};


import { ElMessage } from 'element-plus'
//添加免疫信息
const handleSave = async (row: any) => {
  if (!row.id) {
    // 新增
    const postData = { ...row }
    delete postData.__key
    try {
      const res = await http.post('/api/Cultivations/AddImmunity', {
        immunityModels: [postData]
      })
      if (res.data.code === 200) {
        ElMessage.success('新增成功')
        editingId.value = null
        getImmunity()
      } else {
        ElMessage.error(res.data.msg || '新增失败')
      }
    } catch (e) {
      ElMessage.error('新增失败')
    }
  } else {
    // 修改免疫信息
    const postData = {
      id: row.id,
      rearingDays: row.rearingDays,
      way: row.way,
      function: row.function,
      batch: row.batch
    }
    try {
      const res = await http.put('/api/Cultivations/UpdateImmunity', postData)
      if (res.data.code === 200) {
        ElMessage.success('修改成功')
        editingId.value = null
        getImmunity()
      } else {
        ElMessage.error(res.data.msg || '修改失败')
      }
    } catch (e) {
      ElMessage.error('修改失败')
    }
  }
}
const editImmunizationRow = (row: any) => {
  editingId.value = row.id || row.__key
}
//取消免疫信息新增行
const cancelEditImmunization = (row: any) => {
  editingId.value = null
  getImmunity() 
}
//删除免疫信息
const deleteImmunizationRow = (row: any) => {
  immunizationList.value = immunizationList.value.filter(item => item.__key !== row.__key)
  editingIds.value = editingIds.value.filter(key => key !== row.__key)
  if (editingId.value === row.__key) {
    editingId.value = null
    editRow.value = {}
  }
}


//显示动检证的图片 固定类型为2
async function fetchDongImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 2 }
  });
  // 只要 imgUrl 存在就保留
  DongList.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传动检证的图片
async function handleDongUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '2'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      DongList.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchDongImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除动检证的图片
async function deleteDongImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=2`);
  // 删除成功后刷新图片列表
  fetchDongImages();
}


//设置养殖企业信息（显示）
const CulCom = ref({
  "id": 0,
    "farm": "",
    "leader": "",
    "saves": '',
    "batch": route.query.batch
  
})
onMounted(()=>{
  getcultivationCompany();
})
const getcultivationCompany=()=>{
  console.log(route.query.batch);
  
  http.get("/api/Cultivations/GetCultivationCommpany",{params:{Batch:route.query.batch}}).then(res=>{
    CulCom.value=res.data.datas
  })
}

//点击设置养殖企业信息 获取批次
const openCultivationCompanyDialog = (batch:any) => {
route.query.batch=batch
  dialogVisibleCompany.value = true;
};
const dialogVisibleCompany = ref(false);
const cultivationCompany = ref({
 "farm": "",
  "leader": "",
  "saves": '',
  batch: route.query.batch,         
});
//新增养殖企业信息
import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance | null>(null)
const submitCultivationCompany =async  () => {
   try {
   await  formRef.value?.validate()
    // 校验通过，执行后续逻辑
  } catch (fields: any) {
    
    // 校验未通过，fields 是未通过校验的字段对象
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'farm':
        label = '养殖场'
        break
      case 'leader':
        label = '负责人'
        break
      case 'saves':
        label = '存栏数量'
        break
     
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
      http.post('/api/Cultivations/AddCultivationCommpany', cultivationCompany.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogVisibleCompany.value = false;
      getcultivationCompany();
     }
     else{
       ElMessage.error(res.data.msg);
        getcultivationCompany();
     }
     });
 
};
//新增验证规则
const rules = {
  farm: [
    { required: true, message: '养殖场不能为空', trigger: 'blur' },
    { 
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, 
      message: '仅限中文或字母，最多30位', 
      trigger: 'blur' 
    }
  ],
   leader: [
    { required: true, message: '负责人不能为空', trigger: 'blur' },
    { 
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/, 
      message: '仅限中文或字母，最多30位', 
      trigger: 'blur' 
    }
  ],
   saves: [
    { required: true, message: '存栏数量不能为空', trigger: 'blur' },
    { 
      pattern: /^\d{1,5}$/, 
      message: '仅限数字，最多5位', 
      trigger: 'blur' 
    }
  ]
}

//显示养殖企业的图片 固定类型为3
async function fetchCompanyImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 3 }
  });
  // 只要 imgUrl 存在就保留
  CompanyList.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传养殖企业的图片
async function handleCompanyUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '3'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      CompanyList.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchCompanyImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除养殖企业的图片
async function deleteCompanyImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=3`);
  // 删除成功后刷新图片列表
  fetchCompanyImages();
}
//点击设置屠宰信息 获取批次
const DialogCloseSlaughter = () => {
  dialogSlaughter.value = false
}

const openSlaughterDialog = async (batch:any) => {
route.query.batch=batch
   
  
  dialogSlaughter.value = true;
};

const SlaughterForm = ref({
  "weight": '',
  "startTime": "",
  "endTime": "",
  batch: route.query.batch,         
});
  // 提交前
import dayjs from 'dayjs'

// 提交数据时（存储UTC时间）
const payload = {
    ...SlaughterForm.value,
    startTime: SlaughterForm.value.startTime
        ? dayjs(SlaughterForm.value.startTime).utc().format('YYYY-MM-DD HH:mm:ss')
        : '',
    endTime: SlaughterForm.value.endTime
        ? dayjs(SlaughterForm.value.endTime).utc().format('YYYY-MM-DD HH:mm:ss')
        : ''
}

// 显示数据时（自动转换为本地时间）
function formatTime(val: string | number | undefined | null) {
    if (!val) return '-';
    return dayjs.utc(val).local().format('YYYY年MM月DD日 HH:mm:ss');
}
//新增屠宰信息
const slaughterFormRef = ref<FormInstance | null>(null)
const submitSlaughter = async () => {
  try {
    await slaughterFormRef.value?.validate()
    // 校验通过，提交数据
    dialogSlaughter.value = false
  } catch (fields: any) {
 
    // 校验未通过，弹窗提示
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'weight': label = '到场均重'; break
      case 'startTime': label = '到场时间'; break
      case 'endTime': label = '屠宰时间'; break
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
   await  http.post('/api/Slaughter/AddSlaughter', SlaughterForm.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogSlaughter.value = false;
      getSlaughter();
     }
     else{
       ElMessage.error(res.data.msg);
        getSlaughter();
     }
     });
};
//新增屠宰信息验证规则
const slaughterRules = {
 weight: [
    { required: true, message: '请填写到场均重', trigger: 'blur' },
    {
      // 明确类型
      validator: (rule: any, value: any, callback: (error?: Error) => void) => {
        const str = String(value)
        if (/^\d{1,5}$/.test(str)) {
          callback()
        } else {
          callback(new Error('只允许输入最多5位数字'))
        }
      },
      trigger: 'blur'
    }
  ],
  startTime: [
    { required: true, message: '请填写到场时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请填写屠宰时间', trigger: 'change' }
  ]
}
//设置屠宰信息（显示）
const Slau = ref({
    "id": 0,
    "weight": '',
    "startTime": "",
    "endTime": "",
  "batch": route.query.batch,
  
})
onMounted(()=>{
  getSlaughter();
})
const getSlaughter=()=>{
  console.log(route.query.batch);
  
  http.get("/api/Slaughter/GetSlaughter",{params:{Batch:route.query.batch}}).then(res=>{
    Slau.value=res.data.datas
  })
}

//显示相关资质的图片 固定类型为4
async function fetchQualificationImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 4 }
  });
  // 只要 imgUrl 存在就保留
  Qualification.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传相关资质的图片
async function handleQualificationUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '4'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Qualification.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchQualificationImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除相关资质的图片
async function deleteQualificationImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=4`);
  // 删除成功后刷新图片列表
  fetchQualificationImages();
}


//显示屠宰企业信息
const SlauCom=ref({
    "id": 0,
      "companyName": "",
      "address": "",
      "companyDesc": "",
      "establish": "",
      "batch": ""
})

const getSlaughterCompany=()=>{
  http.get("/api/Slaughter/GetSlaughterCompany",{params:{Batch:route.query.batch}}).then(res=>{
    SlauCom.value=res.data.datas
  })
}

//新增屠宰企业信息
const dialogSlaughterCompany=ref(false)
const DialogCloseSlaughterCompany = () => {
  dialogSlaughterCompany.value = false
}

const openSlaughterCompanyDialog = async (batch:any) => {
route.query.batch=batch
    
  
  dialogSlaughterCompany.value = true;
};


const SlaughterCompanyForm = ref({
 "companyName": "",
  "address": "",
  "companyDesc": "",
  "establish": "",
  batch: route.query.batch,         
});
const slaughterCompanyFormRef = ref<FormInstance | null>(null)
const submitSlaughterCompany = async () => {
  try {
    await slaughterCompanyFormRef.value?.validate()
    // 校验通过，提交数据
    dialogSlaughterCompany.value = false
  } catch (fields: any) {
 
    // 校验未通过，弹窗提示
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'companyName': label = '公司名称'; break
      case 'address': label = '公司地址'; break
      case 'establish': label = '成立时间'; break
       case 'companyDesc': label = '公司简介'; break
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
   await  http.post('/api/Slaughter/AddSlaughterCompany', SlaughterCompanyForm.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogSlaughterCompany.value = false;
      getSlaughterCompany();
     }
     else{
       ElMessage.error(res.data.msg);
        getSlaughterCompany();
     }
     });
};
//新增屠宰企业验证规则
const slaughterCompanyRules = {
companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/,
      message: '公司名称仅支持中文或字母，且不含特殊字符，最多30位',
      trigger: 'blur'
    }
  ],
  address: [
    { required: true, message: '请选择公司地址', trigger: 'change' }
  ],
  establish: [
    { required: true, message: '请选择成立时间', trigger: 'change' }
  ],
  companyDesc: [
    {
      validator: (rule: any, value: string, callback: (error?: Error) => void) => {
        if (!value) {
          callback()
          return
        }
        // 只允许中文、字母，最多500位
        if (!/^[\u4e00-\u9fa5a-zA-Z]{0,500}$/.test(value)) {
          callback(new Error('公司简介仅支持中文或字母，且不含特殊字符，最多500位'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 省市区下拉数据
import { regionData } from 'element-china-area-data'
const provinceList = regionData
const cityList = ref<any[]>([])
const areaList = ref<any[]>([])

const province = ref('')
const city = ref('')
const area = ref('')

// 省份变化时，重置市、区
function onProvinceChange(val: string) {
  const p = provinceList.find(item => item.label === val)
  cityList.value = p?.children ?? []
  city.value = ''
  area.value = ''
  areaList.value = []
  updateAddress()
}

// 市变化时，重置区
function onCityChange(val: string) {
  const c = cityList.value.find(item => item.label === val)
  areaList.value = c ? c.children : []
  area.value = ''
  updateAddress()
}

// 区变化时
function onAreaChange() {
  updateAddress()
}

// 拼接成一个字符串
function updateAddress() {
  if (province.value && city.value && area.value) {
    SlaughterCompanyForm.value.address = `${province.value} ${city.value} ${area.value}`
  } else {
    SlaughterCompanyForm.value.address = ''
  }
}

// 回显时（如编辑）
function setAddress(address: string) {
  if (!address) return
  const arr = address.split('/')
  province.value = arr[0] || ''
  onProvinceChange(province.value)
  city.value = arr[1] || ''
  onCityChange(city.value)
  area.value = arr[2] || ''
  updateAddress()
}

//显示屠宰企业的图片 固定类型为5
onMounted(()=>{
  fetchBusinessImages();
})
async function fetchBusinessImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 5 }
  });
  // 只要 imgUrl 存在就保留
  Business.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传屠宰企业的图片
async function handleBusinessUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '5'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Business.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchBusinessImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除屠宰企业的图片
async function deleteBusinessImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=5`);
  // 删除成功后刷新图片列表
  fetchBusinessImages();
}


//显示深加工信息
const Deeps=ref({
   "id": 0,
      "team": "",
      "leader": "",
      "batch": route.query.batch
})
onMounted(()=>{
  getDeeps();
})
const getDeeps=()=>{
  console.log(route.query.batch);
  
  http.get("/api/DeepProcessing/GetDeepProcessing",{params:{Batch:route.query.batch}}).then(res=>{
    Deeps.value=res.data.datas
  })
}
//新增深加工信息
const dialogdeep=ref(false)
const DialogClosedeep = () => {
  dialogdeep.value = false
}

const opendeepDialog = async (batch:any) => {
route.query.batch=batch
    
  
  dialogdeep.value = true;
};


const deepForm = ref({
  "team": "",
  "leader": "",
  batch: route.query.batch,         
});
const DeepFormRef = ref<FormInstance | null>(null)
const submitDeep = async () => {
  try {
    await DeepFormRef.value?.validate()
    // 校验通过，提交数据
    dialogdeep.value = false
  } catch (fields: any) {
 
    // 校验未通过，弹窗提示
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'team': label = '班组'; break
      case 'leader': label = '负责人'; break
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
   await  http.post('/api/DeepProcessing/AddDeepProcessing', deepForm.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogdeep.value = false;
      getDeeps();

     }
     else{
       ElMessage.error(res.data.msg);
        getDeeps();
     }
     });
};
//新增深加工验证规则
const DeepsRules = {
 team: [
    { required: true, message: '请输入班组', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/,
      message: '班组仅支持中文或字母，且不含特殊字符，最多30位',
      trigger: 'blur'
    }
  ],
  leader: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/,
      message: '负责人仅支持中文或字母，且不含特殊字符，最多30位',
      trigger: 'blur'
    }
  ]
}


//显示食品安全信息的图片 固定类型为6
onMounted(()=>{
  fetchEatImages();
})
async function fetchEatImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 6 }
  });
  // 只要 imgUrl 存在就保留
  Eat.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传食品安全信息的图片
async function handleEatUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '6'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Eat.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchEatImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除食品安全信息的图片
async function deleteEatImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=6`);
  // 删除成功后刷新图片列表
  fetchEatImages();
}




//点击设置深加工企业信息 获取批次
const handleDialogCloseDeepCom = () => {
  dialogVisibleDeepCom.value = false
}

const openDeepComDialog = async (batch:any) => {
route.query.batch=batch
  
  
  dialogVisibleDeepCom.value = true;
};

const DeepFormCom = ref({
 "companyName": "",
  "licenseNum": "",
  batch: route.query.batch,         
});
//新增深加工企业信息
const DeepComFormRef = ref<FormInstance | null>(null)
const submitDeepCom = async () => {
  try {
    await DeepComFormRef.value?.validate()
    // 校验通过，提交数据
    dialogVisibleDeepCom.value = false
  } catch (fields: any) {
     
    // 校验未通过，弹窗提示
    const firstError = Object.keys(fields)[0]
    let label = ''
    switch (firstError) {
      case 'companyName': label = '公司名称'; break
      case 'licenseNum': label = '生产许可证'; break
    }
    ElMessage({
      message: `请填写${label}`,
      type: 'warning',
      duration: 2000
    })
    return
  }
   await  http.post('/api/DeepProcessing/AddDeepProcessingCompany', DeepFormCom.value).then(res=>{
      if(res.data.code==200)
     {
      ElMessage.success(res.data.msg);
      dialogVisibleDeepCom.value = false;
      getDeepCom();
     }
     else{
       ElMessage.error(res.data.msg);
        getDeepCom();
     }
     });
};

//显示深加工信息
const DeepCom=ref({
      "id": 0,
      "companyName": "",
      "licenseNum": "",
      "batch": route.query.batch
})
onMounted( async ()=>{
  await getSlaughterCompany(); 
  await getDeepCom();          
})

const getDeepCom=()=>{
  console.log(route.query.batch);
  
  http.get("/api/DeepProcessing/GetDeepProcessingCompany",{params:{Batch:route.query.batch}}).then(res=>{
    DeepCom.value=res.data.datas
  })
  getSlaughterCompany();
  fetchFanBasic();
}
const rulesDeepCom = {
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z]{1,30}$/,
      message: '公司名称仅支持中文或字母，且不含特殊字符，最多30位',
      trigger: 'blur'
    }
  ],
  licenseNum: [
    { required: true, message: '请输入生产许可证号', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9]{1,30}$/,
      message: '生产许可证号仅支持数字和字母，最多30位',
      trigger: 'blur'
    }
  ]
}

//供应商信息
const batch = route.query.batch;
const vendorTypeMap: Record<string, number> = {
  '原料': 1,
  '辅料': 2,
  '添加剂': 3,
  '包材': 4
};
const dialogVisibleVendor = ref(false);
const dialogFormVendor = ref({ vendorBatch: '', vendorType: '' });
function openDialogVendor(type: string) {
  dialogFormVendor.value.vendorType = type;
  dialogFormVendor.value.vendorBatch = '';
  dialogVisibleVendor.value = true;
}
function saveVendorBatch() {
  const vendorType = vendorTypeMap[dialogFormVendor.value.vendorType];
  http.post('/api/DeepProcessing/AddVendor', {
    batch,
    vendorBatch: dialogFormVendor.value.vendorBatch,
    vendorType
  }).then((res) => {
    if(res.data.code==200)
  {
    ElMessage.success(res.data.msg);
     dialogVisibleVendor.value = false;
    getVendorBatchList(); // 保存后刷新
  }
  else{
    ElMessage.error(res.data.msg);
     dialogVisibleVendor.value = false;
  }
   
  });
}
const rawMaterialVendorBatch = ref('');
const auxMaterialVendorBatch = ref('');
const additiveVendorBatch = ref('');
const packageVendorBatch = ref('');

function getVendorBatchList() {
  // 原料
  http.get('/api/DeepProcessing/GetVendor', { params: { Batch: batch, VendorType: 1 } }).then(res => {
    if (res.data.code === 200 && res.data.datas) {
      rawMaterialVendorBatch.value = res.data.datas.vendorBatch;
    } else {
      rawMaterialVendorBatch.value = '';
    }
  });
  // 辅料
  http.get('/api/DeepProcessing/GetVendor', { params: { Batch: batch, VendorType: 2 } }).then(res => {
    if (res.data.code === 200 && res.data.datas) {
      auxMaterialVendorBatch.value = res.data.datas.vendorBatch;
    } else {
      auxMaterialVendorBatch.value = '';
    }
  });
  // 添加剂
  http.get('/api/DeepProcessing/GetVendor', { params: { Batch: batch, VendorType: 3 } }).then(res => {
    if (res.data.code === 200 && res.data.datas) {
      additiveVendorBatch.value = res.data.datas.vendorBatch;
    } else {
      additiveVendorBatch.value = '';
    }
  });
  // 包材
  http.get('/api/DeepProcessing/GetVendor', { params: { Batch: batch, VendorType: 4 } }).then(res => {
    if (res.data.code === 200 && res.data.datas) {
      packageVendorBatch.value = res.data.datas.vendorBatch;
    } else {
      packageVendorBatch.value = '';
    }
  });
}

onMounted(() => {
  getVendorBatchList();
});

//显示深加工相关材料的图片 固定类型为7
onMounted(()=>{
  fetchMaterialaImages();
})
async function fetchMaterialaImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 7 }
  });
  // 只要 imgUrl 存在就保留
  Materiala.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传深加工相关材料的图片
async function handleMaterialaUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (Materiala.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '7'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Materiala.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchMaterialaImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除深加工相关材料的图片
async function deleteMaterialaImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=7`);
  // 删除成功后刷新图片列表
  fetchMaterialaImages();
}

//显示深加工相关材料的图片 固定类型为8
onMounted(()=>{
  fetchMaterialbImages();
})
async function fetchMaterialbImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 8 }
  });
  // 只要 imgUrl 存在就保留
  Materialb.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传深加工相关材料的图片
async function handleMaterialbUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (Materialb.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '8'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Materialb.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchMaterialbImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除深加工相关材料的图片
async function deleteMaterialbImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=8`);
  // 删除成功后刷新图片列表
  fetchMaterialbImages();
}

//显示深加工相关材料的图片 固定类型为9
onMounted(()=>{
  fetchMaterialcImages();
})
async function fetchMaterialcImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 9 }
  });
  // 只要 imgUrl 存在就保留
  Materialc.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传深加工相关材料的图片
async function handleMaterialcUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (Materialc.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '9'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Materialc.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchMaterialcImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除深加工相关材料的图片
async function deleteMaterialcImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=9`);
  // 删除成功后刷新图片列表
  fetchMaterialcImages();
}


//显示深加工相关材料的图片 固定类型为10
onMounted(async ()=>{
   await fetchMaterialdImages();
})
async function fetchMaterialdImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 10 }
  });
  // 只要 imgUrl 存在就保留
  Materiald.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传深加工相关材料的图片
async function handleMaterialdUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (Materiald.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '10'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      Materiald.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchMaterialdImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除深加工相关材料的图片
async function deleteMaterialdImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=10`);
  // 删除成功后刷新图片列表
  fetchMaterialdImages();
}


//显示深加工企业的图片 固定类型为11
onMounted(async ()=>{
  await fetchDeepImages();
})
async function fetchDeepImages() {
  const batch = route.query.batch;
  const res = await http.get('/api/Uploads/GetImagesByBatchAndType', {
    params: { batch, imgType: 11 }
  });
  // 只要 imgUrl 存在就保留
  Deep.value = Array.isArray(res.data)
    ? res.data.filter(item => !!item && !!item.imgUrl)
    : [];
}

// 上传深加工企业的图片
async function handleDeepUpload(event: Event) {
  const files = (event.target as HTMLInputElement).files
  if (!files || !files.length) return
  if (CompanyList.value.length + files.length >= 9) {
    ElMessage.warning('最多只能上传9张图片')
    return
  }
  const formData = new FormData()
  formData.append('formFiles', files[0])
  try {
    const res = await http.post('/api/Uploads/UploadFiles', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Batch': route.query.batch as string,
        'ImgType': '11'
      }
    })
    const urls = res.data || []
    if (urls.length) {
      CompanyList.value.push(urls[0])
      ElMessage.success('上传成功')
      fetchDeepImages()
    }
  } catch (err) {
    ElMessage.error('上传失败')
  }
}

// 删除深加工企业的图片
async function deleteDeepImage(id: string) {
  await http.delete(`/api/Uploads/DeleteImage/${id}?imgType=11`);
  // 删除成功后刷新图片列表
  fetchDeepImages();
}


watch(
  [fan, detail, Slau, Deeps],
  () => {
    localStorage.setItem('basicInfo', JSON.stringify(fan.value))
    localStorage.setItem('breedingInfo', JSON.stringify(detail.value))
    localStorage.setItem('slaughterInfo', JSON.stringify(Slau.value))
    localStorage.setItem('deepInfo', JSON.stringify(Deeps.value))
  },
  { deep: true }
)

</script>

<style scoped>
.custom-form .el-form-item__error {
  display: block;
}
.detail-container {
  padding: 32px;
  background: #fff;
}
.detail-top {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.main-img {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  background: #f5f5f5;
}
.main-info {
  flex: 1;
}
.title {
  font-size: 28px;
  margin-bottom: 16px;
}
.row {
  margin-bottom: 8px;
  color: #666;
  font-size: 16px;
  display: flex;
  gap: 32px;
}
.btns {
  display: flex;
  flex-direction: row; /* 横向排列 */
  gap: 12px;
  margin-top: 12px;
}
.detail-bottom {
  margin-top: 40px;
  min-height: 120px;
  background: #fafbfc;
  border-radius: 8px;
}

.report-section {
  margin-top: 24px;
}
.section-titles {
  font-weight: bold;
  margin-bottom: 8px;
}
.report-list {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.report-img-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}
.report-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f5f5;
}
.report-upload {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.img-delete-x {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #f56c6c;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  font-size: 20px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}


.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF; /* Element Plus 主色 */
  letter-spacing: 2px;
  margin-right: 12px;
}


.section-setting-btn {
  background-color: #f4f8ff; 
  color: #409eff;          
  border-radius: 15px;       
  font-weight: 500;          
  transition: all 0.2s;      
  border: none;  
}

/* 卡片容器 */
.breeding-info-card {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
}

/* 标题栏 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}
.card-titless {
  font-size: 17px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}
.card-titles {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 设置按钮 */
.setting-btn {
  color: #000000;
  font-size: 14px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  background-color: #DCDCDC;
  margin-left: 15px;
}

.setting-btn .el-icon-setting {
  margin-right: 4px;
}

/* 内容区域 */
.card-content {
  padding: 4px 0;
  
}

.info-columns {
  display: flex;
   justify-content: flex-start; 
   flex-wrap: wrap; 

}
.header-wrapper {
  /* 关键：底部加浅灰色边框 */
  border-bottom: 1px solid #ebeef5; 
  padding-bottom: 8px; /* 与内容区隔开，可选 */
  margin-bottom: 16px; /* 与内容区隔开，可选 */
  display: flex;
  align-items: center;

}

.column {
  width: 45%;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.info-items {
    display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.info-columnss {
 display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}

.label {
  color: #606266; /* 标签颜色：深灰色 */
  width: 120px; /* 统一标签宽度，保证对齐 */
  text-align: left;
  margin-right: 10px;
}

.value {
  color: #303133; /* 值颜色：更深色 */
  font-weight: 500; /* 字体稍粗 */
}

.info-columnsss  {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  width: 100%; /* 确保撑满父容器 */
}

/* 左右列的基础样式 */
.columns {
  flex: 0 0 auto; /* 不伸缩、不收缩、宽度自适应 */
  padding: 0 10px; /* 左右留白 */
}

/* 左侧列特定样式（可选） */
.columns.left {
  text-align: left; 
}

/* 右侧列特定样式（可选） */
.columns.right {
  text-align: right;
}
</style>
